<template>
  <div>
      <el-table :data="list">
        <el-table-column label="主图">
          <template slot-scope="scope">
            <img :src="`${$api.baseURL}${scope.row.mainPic[0]}`" width="60px" height="60px">
          </template>
        </el-table-column>
        <el-table-column label="商品标题" prop="title"></el-table-column>
        <el-table-column label="一口价" prop="price"></el-table-column>
        <el-table-column label="销售状态">
          <template slot-scope="scope">
            <el-tag
              :type=" scope.row.state === 1 ? 'success' : 'info' "
              effect="dark">
              {{ scope.row.state === 1 ? '在售' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state == 2" type="success" size="small" @click="changeState(scope,1)">上架</el-button>
            <el-button v-if="scope.row.state == 1" type="warning" size="small" @click="changeState(scope,2)">下架</el-button>
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list: [],
      page: 1,
      pageSize: 5,
      count: 0,
      state: this.$route.params.state
    }
  },
  created(){
    this.getData()
  },
  beforeRouteEnter(to,from,next){ //路由跳转
    // console.log(from);
    // console.log(to);
    // console.log('routerEnter.....');
    next()
  },
  beforeRouteUpdate(to,from,next){ //动态路由的更新
    // console.log('routerUpdate...')
    // console.log(this.state);
    // console.log(to)
    this.state = to.params.state
    this.getData()
    next()
  },
  beforeRouteLeave(to,from,next){ //离开路由前
    next()
  },
  methods: {
    getData(){
      this.$http({
        path: this.$api.Goods.find,
        params: {
          page: this.page,
          pageSize: this.pageSize,
          state: this.state
        }
      }).then(res=>{
        console.log(res);
        this.list = res.data
        this.page = res.page
        this.pageSize = res.pageSize
        this.count = res.count
      })
    },
    stateChange(val){
      console.log(val);
    },
    changeState(scope, state){
      this.$http({
        path: this.$api.Goods.state,
        method: 'post',
        params: {
          _id: scope.row._id,
          state
        }
      }).then(res=>{
        this.$message({
          type: res.code === 200 ? 'success':'error',
          message: res.msg
        })
        if(res.code === 200){
          this.getData()
        }
      })
    }
  }
}
</script>

<style>

</style>